<template>
  <div class="Combo_Box">
    <div class="Combo_Titele">成人心外科九病区</div>
    <div
      class="Combo_Boxshang"
      :class="isShowQiehuan ? 'Combo_Boxshang' : 'Combo_Boxxia'"
      @click="addIsShowQiehuan"
    ></div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue"
const isShowQiehuan = ref(false)
const addIsShowQiehuan = () => {
  isShowQiehuan.value = !isShowQiehuan.value
}
</script>
<style scoped lang="less">
.Combo_Box {
  width: 100%;
  height: 100%;
  background: url("@/assets/Sidebar/1.png") no-repeat center;
  background-size: 100%;
  // background-color: red;
  position: relative;
  display: flex;
  align-items: center;
  .Combo_Boxshang {
    cursor: pointer;
    width: 38px;
    height: 34px;
    position: absolute;
    right: 24px;
    background: url("@/assets/Sidebar/3.png") no-repeat center;
    background-size: 100% 100%;
  }
  .Combo_Boxxia {
    cursor: pointer;
    width: 38px;
    height: 34px;
    position: absolute;
    right: 24px;
    background: url("@/assets/Sidebar/2.png") no-repeat center;
    background-size: 100% 100%;
  }
  .Combo_Titele {
    font-size: 24px;
    margin-left: 34px;
    font-weight: 600px;
    background: linear-gradient(180deg, #00d0ff 0%, #0073ff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
</style>
